<template>
  <div>
    <div id="Pie" class="wrap"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      this.drawPieChart()
    })
  },
  methods: {
    drawPieChart() {
      let chartDom = document.getElementById('Pie')
      let myChart = echarts.init(chartDom)
      const path = this.URL.Welcome
      this.$http
        .get(path)
        .then((result) => {
          var result_data = result.data.value
          let option = {
            title: {
              text: '某站点用户访问来源',
              subtext: '纯属虚构',
              left: 'center',
            },
            tooltip: {
              trigger: 'item',
            },
            legend: {
              orient: 'vertical',
              left: 'left',
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: Number(result_data.food_number), name: '商品数目' },
                  { value: Number(result_data.toSend_number), name: '待发货' },
                  {
                    value: Number(result_data.toConfirm_number),
                    name: '待确认',
                  },
                  {
                    value: Number(result_data.finished_number),
                    name: '已完成',
                  },
                  { value: Number(result_data.closed_number), name: '已关闭' },
                  {
                    value: Number(result_data.total_sale_number),
                    name: '总销售',
                  },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
            ],
          }
          option && myChart.setOption(option)
        })
        .catch(() => {
          this.$message.error('NETWORK ERROR')
        })
    },
  },
}
</script>

<style lang='less' scope>
.wrap {
  width: 100%;
  height: 580px;
}
</style>